import React, { Component } from 'react'
import { Link, Route } from 'react-router-dom'
import Detail from './Detail'
export default class HomeMessage extends Component {
    state = {
        message: [
            { id: 1, msg: "message1" },
            { id: 2, msg: "message2" },
            { id: 3, msg: "message3" },
        ]
    }
    render() {
        const { message } = this.state
        return (
            <ul>
                {
                    message.map((messageObj) => {
                        return (<li key={messageObj.id}>
                            {/* 1.通过pramas传参 */}
                            {/* <Link to={`/home/message/detail/${messageObj.id}/${messageObj.msg}`}>{messageObj.msg}</Link> */}
                            {/* 2.search传参   一定要加问号*/}
                            {/* <Link to={`/home/message/detail/?id=${messageObj.id}&&content=${messageObj.msg}`}>{messageObj.msg}</Link> */}
                            {/* 3.state传参，该state不同于组件中的state ，通过该方式传递参数，传递的参数不在路由中体现 */}
                            <Link to={{pathname:"/home/message/detail",state:{id:messageObj.id,content: messageObj.msg}}}>{messageObj.msg}</Link>
                        </li>)
                    })
                }
                {/* 祖册路由 */}
                {/* 1. 通过params传参，组件接收参数 */}
                {/* <Route path="/home/message/detail/:id/:content" component={Detail}/> */}
                {/* 2.search传参 */}
                {/* <Route path="/home/message/detail" component={Detail}/> */}
                {/* 3.state传参 */}
                <Route path="/home/message/detail" component={Detail}/>
            </ul>
        )
    }
}
